<template>
    <div >
        <div class="t_item">
            <div class="t_title">自动转单：</div>
            <el-switch
            v-model="switchvalue"
            @change="changesw"
            :active-value="1"
            :inactive-value="0"
            active-color="#005AFF"
            inactive-color="#ddd">
            </el-switch>
            <el-tooltip class="item" effect="light"
                content="每执行转单一次扣费0.05元，该费用由转单方支付，转单后原生产失败的上游中间商及供货方将会自动撤单并退回进单费"
                placement="top">
                <i class="el-icon-question" style="color: rgb(64, 155, 250); font-size: 25px;  margin-left: 20px; cursor: pointer;"></i>
            </el-tooltip>
        </div>
        <div class="t_item" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="t_title">设置转单订单来源：</div>
            <el-cascader
            :style="{width: wwidth}"
            v-model="cascadervalue"
            :options="options"
            :props="props"
            @change="handleChange"></el-cascader>
            <el-tooltip class="item" effect="light"
                content="选择后只有该来源的订单会执行转单，不选择则默认全转"
                placement="top">
                <i class="el-icon-question" style="color: rgb(64, 155, 250); font-size: 25px;  margin-left: 20px; cursor: pointer;"></i>
            </el-tooltip>
        </div>
        <div class="t_item" style="display: block;">
            <div class="t_title">设置转单目标商品：</div>
            <el-table
                :header-cell-style="{ background: '#F2F2F2' }"
                :data="tableData"
                style="margin-left: 180px;width: auto;">
                <el-table-column
                    prop="title"
                    label="排序"
                    align="center">
                    <template slot-scope="scope">
                        <div>
                            {{ scope.$index+1 }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="商品名称"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="fetch_code"
                    label="商品编码"
                    align="center">
                </el-table-column>
                <el-table-column
                   
                    label="操作"
                    align="center">
                    <template slot-scope="scope">
                        <el-button @click="del(scope.$index)" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button class="t_add_btn" type="primary" @click="opencreate" icon="el-icon-plus" style="margin-top: 20px;margin-left: 180px;margin-bottom: 20px;" plain>添加</el-button>
            <div style="background-color: #EBF4FF;padding: 15px;margin-bottom: 20px;margin-left: 180px;">
            <div style="color: #8E8E8E;">该功能会将生产失败的订单（包括初审失败）自动更换商品并重新走生产流程，转单过的订单您可在订单右上角看到一个橙色的“转”字标识，点击该标识可查看该订单转单记录，转单生产成功后会自动在相应平台发货，后续佣金会按照生产成功的商品计算。</div>
            <div style="color: #FF0000;margin-top: 15px;">
                注：仅自己发展的订单可以转单，如需转单下游订单请沟通订单发展方后由其设置转单。
            </div>
        </div>
        </div>
        
        <el-dialog
            title="创建订单"
            :visible.sync="isshowcreate"
            width="380px"
            center="true"
            :close-on-click-modal="false">
            <div>
                <el-select filterable class="t_sel" style="margin-bottom: 10px;" v-model="chooseshop" placeholder="请选择">
                    <el-option
                    v-for="item in shopoptions"
                    :key="item.id"
                    :label="item.title+'_'+item.fetch_code"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div style="text-align: center;margin-top: 20px;">
                <el-button   type="primary" @click="surecreate">确 定</el-button>
            </div>
        </el-dialog>
    </div>
  </template>
  
  <script>
    import axios from "axios";
    export default {
      name: '',
      props:['wwidth','auto_transfer','auto_transfer_pages','auto_transfer_sources'],
      data() {
        return {
            switchvalue:0,
            cascadervalue:'',
            options: [],
            tableData: [],
            shopoptions: [],
            chooseshop:'',
           
            isshowcreate:false,
            props: { multiple: true },
        }
      },
      created() {
      
        //订单来源列表
        this.getfromlist()
        //商品列表
        this.getshoplist()
        //开启自动转单
        // this.getopen()
      },
      mounted(){
        
        setTimeout(()=>{
            console.log('收到父亲传值')
        console.log(this.auto_transfer)
            if(this.auto_transfer){
                this.switchvalue = this.auto_transfer
            }
            if(this.auto_transfer_pages){
                this.tableData = this.auto_transfer_pages
            }
            if(this.auto_transfer_sources){
                this.cascadervalue = this.auto_transfer_sources
            }
        },1500)
        
      },
      methods: {
        //开启自动转单
        getopen(){
            axios.get('/api/plan-market/order-page')
				.then(response => {
					if (response.data.msg.code == 0) {
						console.log('开启自动转单')
						console.log(response.data)
                        
					} else {
						this.$message.error(response.data.msg.info);
					}

				})
        },
        //订单来源列表
        getfromlist(){
            axios.get('/api/form/channel/source/list')
				.then(response => {
					if (response.data.msg.code == 0) {
						console.log('订单来源列表')
						console.log(response.data)
                        var arr = []
                        for(var x=0;x<response.data.data.length;x++){
                            arr.push({
                                value:response.data.data[x].id,
                                label:response.data.data[x].channel_name,
                                children:[]
                            })

                            if(response.data.data[x].source.length!=0){
                                for(var y=0;y<response.data.data[x].source.length;y++){
                                    arr[x].children.push({
                                        value:response.data.data[x].source[y].source_name,
                                        label:response.data.data[x].source[y].source_name
                                    })
                                }
                            }

                        }
                        console.log(arr)
                        this.options = arr
					} else {
						this.$message.error(response.data.msg.info);
					}

				})
        },
        //商品列表
        getshoplist(){
            axios.get('/api/gth/order-pages2?status=100&_page_size=2000')
				.then(response => {
					if (response.data.msg.code == 0) {
						console.log('商品列表')
						console.log(response.data.data.data)
                        this.shopoptions = response.data.data.data
					} else {
						this.$message.error(response.data.msg.info);
					}

				})
        },
        //设置转单目标商品：
        surecreate(){

            this.isshowcreate = false

            for(var x=0;x<this.shopoptions.length;x++){
                if(this.shopoptions[x].id == this.chooseshop){
                    this.tableData.push({
                        "id": this.shopoptions[x].id,
                        "title":this.shopoptions[x].title,
                        "fetch_code":this.shopoptions[x].fetch_code
                    })
                }
            }


            this.$emit('surecreate',this.tableData)

            
        },
        //删除商品
        del(i){
            console.log(i)
            this.tableData.splice(i, 1);
            this.$emit('surecreate',this.tableData)
        },
        //修改自动转单
        changesw(val){
            console.log(val)
            this.$emit('changesw',this.switchvalue)
        },
        //修改转单来源
        handleChange(val){
            console.log(val)
            this.$emit('handleChange',this.cascadervalue)
        },
        //打开
        opencreate(){
            this.isshowcreate = true
        }
  
      }
    }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  .t_title{
    width: 180px;
    text-align: right;
    padding:0 6px 0 0;
    box-sizing: border-box;
  }
  .t_item{
    color: #606266;
    font-size: 14px;
    line-height: 40px;
    display: flex;
    align-items: center;
    
  }
/deep/ .t_add_btn {
    border:1px solid #0048FF !important;
    color:#0048FF !important;
    background-color:#DEECF6 !important;
}
 /* /deep/ .t_sel .el-input__inner{ width:450px !important;} */
  </style>
  